<template>
    <div ref="editEle"></div>
</template>

<script>
import { onMounted, ref } from '@vue/composition-api';
import Vditor from 'vditor';
import 'vditor/dist/index.css'
export default {
    setup() {
        const editEle = ref(null)
        const contentEditor = ref(null)
        onMounted(() => {
            contentEditor.value = new Vditor(editEle.value, {
                toolbar: [
                    'emoji',
                    'headings',
                    'bold',
                    'italic',
                    'strike',
                    'link',
                    '|',
                    'list',
                    'ordered-list',
                    'check',
                    'outdent',
                    'indent',
                    '|',
                    'quote',
                    'line',
                    'code',
                    'inline-code',
                    'insert-before',
                    'insert-after',
                    '|',
                    'upload',
                    'record',
                    'table',
                    '|',
                    'undo',
                    'redo',
                    '|',
                    'edit-mode',
                    // 'content-theme',
                    // 'code-theme',
                    'export',
                    {
                        name: 'more',
                        toolbar: [
                            'fullscreen',
                            'both',
                            'preview',
                            'info',
                            'help',
                        ],
                    }],
                height: '100%',
                width: '100%',
                toolbarConfig: {
                    // pin: true,
                },
                cache: {
                    enable: false,
                },
                cdn: import.meta.env.VITE_BASE,
                after: () => {
                    contentEditor.value.setValue('hello, Vditor + Vue!')
                },
            })
            window.edit = contentEditor
        })
        
        function setValue(mdValue) {
            contentEditor.value.setValue(mdValue)
        }

        function getValue() {
            return contentEditor.value.getValue()
        }

        return {
            editEle,
            setValue,
            getValue
        }
    }
}
</script>

<style></style>